<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js 订单表单</title>
    <script src="../../js/vue.js"></script>
  <style>
    /*  隐藏未编译的变量 */

    [v-cloak] {
      display: none;
    }

    *{
      margin:0;
      padding:0;
    }

    body{
      font:15px/1.3 'Open Sans', sans-serif;
      color: #5e5b64;
      text-align:center;
    }

    a, a:visited {
      outline:none;
      color:#389dc1;
    }

    a:hover{
      text-decoration:none;
    }

    section, footer, header, aside, nav{
      display: block;
    }

    /*-------------------------
    	订单表单
    --------------------------*/

    form{
      background-color: #61a1bc;
      border-radius: 2px;
      box-shadow: 0 1px 1px #ccc;
      width: 400px;
      padding: 35px 60px;
      margin: 50px auto;
    }

    form h1{
      color:#fff;
      font-size:64px;
      font-family:'Cookie', cursive;
      font-weight: normal;
      line-height:1;
      text-shadow:0 3px 0 rgba(0,0,0,0.1);
    }

    form ul{
      list-style:none;
      color:#fff;
      font-size:20px;
      font-weight:bold;
      text-align: left;
      margin:20px 0 15px;
    }

    form ul li{
      padding:20px 30px;
      background-color:#e35885;
      margin-bottom:8px;
      box-shadow:0 1px 1px rgba(0,0,0,0.1);
      cursor:pointer;
    }

    form ul li span{
      float:right;
    }

    form ul li.active{
      background-color:#8ec16d;
    }

    div.total{
      border-top:1px solid rgba(255,255,255,0.5);
      padding:15px 30px;
      font-size:20px;
      font-weight:bold;
      text-align: left;
      color:#fff;
    }

    div.total span{
      float:right;
    }
  </style>

</head>
<body>

<!-- v-cloak 隐藏未编译的变量，直到 Vue 实例准备就绪。 -->

<form id="main" v-cloak>
  <h1>Services</h1>
  <ul>
    <!-- 循环输出 services 数组, 设置选项点击后的样式 -->
    <li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">
      <!-- 显示订单中的服务名，价格Vue.js 定义了货币过滤器，用于格式化价格 -->
      {{service.name}} <span>{{service.price | currency}}</span>
    </li>
  </ul>
  <div class="total">
    <!-- 计算所有服务的价格，并格式化货币 -->
    Total: <span>{{total() | currency}}</span>
  </div>
</form>
<script>

  // 自定义过滤器 "currency".
  Vue.filter('currency', function (value) {
    return '$' + value.toFixed(2);
  });

  var demo = new Vue({
    el: '#main',
    data: {
      // 定义模型属性 the model properties. The view will loop
      // 视图将循环输出数组的数据
      services: [
        {
          name: 'Web Development',
          price: 300,
          active:true
        },{
          name: 'Design',
          price: 400,
          active:false
        },{
          name: 'Integration',
          price: 250,
          active:false
        },{
          name: 'Training',
          price: 220,
          active:false
        }
      ]
    },
    methods: {
      toggleActive: function(s){
        s.active = !s.active;
      },
      total: function(){

        var total = 0;

        this.services.forEach(function(s){
          if (s.active){
            total+= s.price;
          }
        });

        return total;
      }
    }
  });

</script>
</body>
</html>
